<template>
  <div>
    <div class="footer-main" v-if="!isHidePageHeader">
      <div class="up">
        <div class="block">
          <div class="block1">
            <div class="logo"><img src="@/assets/img/logo-foot.png" alt="" /></div>
            <div class="select">
              <el-select v-model="value" :placeholder="$t('友情链接')" class="selectbox" @change="toPage">
                <el-option
                  v-for="item in options"
                  :key="item.lable"
                  class="option"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="span">
              <div>
                <span>{{ $t('加入我们') }}</span> ｜ <span>{{ $t('软件下载') }}</span> ｜
                <span>{{ $t('金融商城') }}</span> ｜
                <span>{{ $t('上海市互联网违法和不良信息举报中心') }}</span>
              </div>
              <div>
                <span>{{ $t('合法网站声明') }}</span> ｜ <span>{{ $t('网站公示系统') }}</span> ｜
                <span>{{ $t('投诉与建议') }}</span> ｜ <span>{{ $t('版权声明') }}</span> ｜
                <span>{{ $t('使用条款') }}</span> ｜
                <span>{{ $t('分支机构') }}</span>
              </div>
            </div>
          </div>

          <div class="fly-mid"></div>
          <div class="block2">
            <div class="box">
              <div>
                <p>{{ $t('联系我们') }}</p>
                <p>{{ $t('统一客服') }}</p>
                <p>95521/400-8888-666</p>
              </div>
              <div>
                <p>{{ $t('在线咨询') }}（9:00 - 18:00）</p>
                <p>{{ $t('咨询电话') }}：021-38032428</p>
                <p>{{ $t('公司地址') }}</p>
              </div>
            </div>
          </div>

          <div class="fly-mid"></div>
          <div class="block3">
            <div class="box">
              <div>
                <p class="text" type="text">{{ $t('关注我们') }}</p>
              </div>
              <!-- <div class="focus-us">关注我们</div> -->
              <div>
                <el-popover
                  popper-class="pop-focus-us"
                  class="pop-focus-us"
                  placement="top-start"
                  width="150"
                  trigger="hover"
                >
                  <img src="@/assets/img/focusGTAJ3.png" alt="" />
                  <p>扫描关注国泰君安</p>
                  <div slot="reference" class="icon">
                    <div class="icon-pic"></div>
                  </div>
                </el-popover>
              </div>
              <div>
                <div>
                  <img src="@/assets/img/home/downloadApp.png" alt="" />
                  <p>APP {{ $t('下载') }}</p>
                </div>
                <div>
                  <img src="@/assets/img/home/hehuduan.png" alt="" />
                  <p>{{ '活动小程序' }}</p>
                </div>
                <div>
                  <img src="@/assets/img/home/miniBg.jpg" alt="" />
                  <p>{{ '研报小程序' }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="down">
        <div class="tips">
          <div>
            <p>Copyright © 1999-2022 {{ $t('国泰君安证券股份有限公司') }}.</p>
            <p>{{ $t('投资有风险_入市需谨慎') }}</p>
            <p class="left">支持</p>
            <p class="magin">IPv6</p>
          </div>
          <div>
            <p class="pointer" @click="jump('沪公网安备')">{{ $t('沪公网安备') }} 31010602006306</p>
            <p class="pointer" @click="jump('沪ICP证')">{{ $t('沪ICP证') }} B2-20040408-5</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Select, Option } from 'element-ui';
import { mapGetters} from 'vuex';
export default {
  name: 'IndexFooter',
  components: {
    [Select.name]: Select,
    [Option.name]: Option
  },
  computed: {
    ...mapGetters({
      token: 'token',
      isHidePageHeader: 'isHidePageHeader'
    }),
  },
  data () {
    return {
      options: [
        { label: '中国证监会', value: 'http://www.csrc.gov.cn/pub/newsite/' },
        { label: '中国证券业协会', value: 'https://www.sac.net.cn/' },
        { label: '中国证券交易所', value: 'http://www.sse.com.cn/' },
        { label: '上海证券交易所', value: 'http://www.sse.com.cn/' },
        { label: '深圳证券交易所', value: 'https://www.szse.cn/index/index.html' },
        { label: '上海市国资委', value: 'https://www.gzw.sh.gov.cn/' },
        { label: '全国中小企业股份转让系统', value: 'http://www.neeq.com.cn/' },
        { label: '上海证券交易所投资者教育', value: 'http://edu.sse.com.cn/' }
      ],
      value: ''
    };
  },

  methods: {
    toPage (url) {
      this.value = '';
      url && window.open(url, '_blank');
    },
    jump (name) {
      switch (name) {
      case '沪公网安备':
      window.open('http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010602006306', '_blank');
      return;
      case '沪ICP证':
      window.open('https://beian.miit.gov.cn/#/Integrated/index', '_blank');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.footer-main {
  width: 100%;
  height: 340px;
  background-color: #1e1f26;

  .up {
    display: flex;
    width: 1200px;
    height: 290px;
    margin: 0 auto;
    background-color: #1e1f26;
    flex-flow: row;
    align-items: center;
    justify-content: center;

    .block {
      display: flex;
      width: 100%;
      height: 100%;

      > div {
        display: flex;
        width: 400px;
        height: 212px;
        flex-flow: column;
      }

      .block1 {
        // flex: 1;
        display: flex;
        // background: #c3c5db;
        width: 534px;
        flex-flow: column;
        // justify-content: space-between;
        height: auto;
        .logo {
          width: 159px;
          height: 54px;
          margin-top: 40px;
          margin-bottom: 51px;

          > img {
            width: 100%;
            height: 100%;
          }
        }

        .select {
          padding-top: 0;

          ::v-deep .el-input__inner {
            box-sizing: border-box;
            display: inline-block;
            width: 181px;
            height: 30px;
            background-color: #1e1f26;
            background-image: none;
            border: 1px solid #fff;
            border-radius: 20px;
            font-size: inherit;
            line-height: 20px;
            color: #606266;
          }

          ::v-deep .el-input__icon {
            line-height: 30px;
          }

          ::v-deep .el-select-dropdown {
            position: absolute;
            max-height: 424px;
            background-color: #1e1f26;
            border: 0.5px solid #eff0f3;
          }
          // .selectbox {
          //   min-height: 400px;
          // }
          // .option {
          //   // min-height: 400px;
          // }
        }

        .span {
          display: flex;
          flex-flow: column;

          > div {
            display: flex;
            padding-top: 26px;
            font-size: 12px;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.8);
            flex-flow: row;

            > span {
              cursor: pointer;
              // word-break: break-all;
              word-wrap: break-word;
            }

            > span:hover {
              color: #68709e;
            }
          }
        }
      }

      .block2 {
        width: 410px;
        align-items: center;

        .box {
          display: flex;
          height: 210px;
          flex-flow: column;
          padding-top: 8px;

          > div {
            font-family: PingFangSC-Medium;
            color: rgba(255, 255, 255, 0.8);
          }

          > div:nth-child(1) {
            display: flex;
            padding-bottom: 20px;
            flex: 1;
            flex-flow: column;
            justify-content: space-between;

            > p:nth-child(1) {
              margin-top: 40px;
              font-size: 14px;
            }

            > p:nth-child(2) {
              margin-top: 16px;
              margin-bottom: 12px;
              font-size: 12px;
            }

            > p:nth-child(3) {
              font-size: 24px;
              font-weight: 500;
            }
          }

          > div:nth-child(2) {
            display: flex;
            width: 100%;
            height: 80px;
            flex-flow: column;
            justify-content: space-evenly;

            > p {
              height: 17px;
              margin-bottom: 8px;
              font-size: 12px;
            }
          }
        }
      }

      .block3 {
        padding-left: 50px;

        // .focus-us {
        //   margin-top: 40px;
        // }

        .box {
          display: flex;
          height: 212px;
          padding-top: 40px;
          flex-flow: column;

          > div:nth-child(1) {
            font-size: 14px;
            color: #fff;
          }

          > div:nth-child(2) {
            // padding-right: 20px;
            display: flex;
            margin-top: 12px;
            flex-flow: row;

            .icon {
              padding-left: 10px;
              cursor: pointer;

              .icon-pic {
                transition: all 0.25s;
                width: 36px;
                height: 36px;
                background: url('~@/assets/img/index/wxicon.png') center center no-repeat;
                background-size: 100% 100%;
                border-radius: 50%;
              }

              .icon-pic:hover {
                width: 36px;
                height: 36px;
                background: url('~@/assets/img/index/wxicon1.png') center center no-repeat;
                background-size: 100% 100%;
                border-radius: 50%;
              }
            }
          }

          > div:nth-child(3) {
            display: flex;
            margin-top: 26px;
            flex-flow: row;

            > div {
              display: flex;
              padding-right: 15px;
              flex-flow: column;
              align-items: center;

              > img {
                width: 90px;
                height: 90px;
                // border-radius: 50%;
              }

              > p {
                padding-top: 10px;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.8);
              }
            }
          }
        }
      }

      .fly-mid {
        display: inline-block;
        vertical-align: middle;
        width: 1px;
        height: 170px;
        margin-top: 40px;
        background: #e4e4e4;
        opacity: 0.1;
      }
    }
  }

  .down {
    display: flex;
    width: 100%;
    height: 50px;
    background: #121419;
    justify-content: center;
    align-items: center;

    .tips {
      display: flex;
      width: 100%;
      max-width: 1200px;
      justify-content: space-between;

      > div {
        display: flex;
        margin-right: 20px;
        font-size: 14px;
        color: #b0b0b0;
        align-items: center;
        justify-content: space-around;
      }

      > div:nth-child(2) {
        flex: 1;
      }
      .pointer{
        cursor: pointer;
      }
      .left{
        margin-left: 5px;
      }
      .magin{
        font-size: 12px;
        border: solid 1px #79a1c9;
        padding: 1px 10px;
        border-radius: 20px;
        margin: 0 5px;
      }
    }
  }
}
</style>

<style lang="scss">
.pop-focus-us {
  margin-top: -0;
  text-align: center;

  .text {
    font-size: 14px;
    color: #fff;
  }

  img {
    width: 124px;
    height: 124px;
    margin: 0 auto;
  }
}
</style>
